import React, { useState } from 'react'
import { Form, Select, Input, Button, Row, Col, DatePicker } from 'antd'
import { RightOutlined, DownOutlined } from '@ant-design/icons'
const { RangePicker } = DatePicker
const { Option } = Select
import { history } from 'umi'
export default (props: any) => {

    console.log("search load")
    const { form, getList } = props
    const [visable, setVisable] = useState(true)

    const searchFinish = (values: any) => {
        const rangeValue = values['range_order_date'];
        values.range_order_date = []
        if (rangeValue !== undefined) {
            values.range_order_date = [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')];
        }
        getList({ ...values })
    }
    const toggleVisable = () => {
        setVisable(!visable)
    }
    return (
        <div style={{ border: "1px solid #f1f1f1", padding: "10px 20px 10px" }}>

            <div style={{ textAlign: "right" }}> {visable ? <DownOutlined onClick={toggleVisable} style={{ color: "#BEBEBE" }} />
                : <RightOutlined onClick={toggleVisable} style={{ color: "#BEBEBE" }} />}</div>
            <Form
                form={form}
                onFinish={searchFinish}
                initialValues={{
                    search_type: "username",
                    order_type: 0,
                    order_status: 0,
                    promote_type: 0,
                    pay_way: 0,
                    order_origin: 0
                }}
                style={visable ? {} : { display: "none" }}
            >
                <Row gutter={8}>
                    <Col span={4}>
                        <Form.Item label="搜索方式" name="search_type">
                            <Select>
                                <Option value="username">用户名</Option>
                                <Option value="mobile">手机</Option>
                                <Option value="email">邮箱</Option>
                            </Select>
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item name="search_keyword" noStyle>
                            <Input />
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={8}>
                    <Col span={6}>
                        <Form.Item label="注册时间" name="register_date">
                            <RangePicker />
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={24}>
                    <Col span={5}>
                        <Form.Item label="会员标签" name="order_type">
                            <Select>
                                <Option value={0}>全部</Option>
                                <Option value={1}>贵客</Option>
                            </Select>
                        </Form.Item>
                    </Col>

                    <Col span={5}>
                        <Form.Item label="会员状态" name="promote_type" >
                            <Select>
                                <Option value={0}>全部</Option>
                                <Option value={1}>正常</Option>
                                <Option value={2}>锁定</Option>
                            </Select>
                        </Form.Item>
                    </Col>
                </Row>

                <Row gutter={8}>
                    <Col span={6}>
                        <Form.Item>
                            <Button type="primary" htmlType="submit" style={{ marginLeft: "69px" }}>查询</Button>
                            <Button style={{ margin: "0 6px" }} onClick={() => {
                                form.resetFields()
                            }}>重置</Button>
                            <Button type="primary" ghost onClick={() => {
                                window.open('http://127.0.0.1:8888/admin/member/export-excel')
                            }}>导出</Button>
                            <Button type="primary" style={{ margin: "0 6px" }} onClick={() => {
                                history.push('/member/list/add')
                            }}>添加</Button>
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
        </div>
    )
}